<template>
	<view>
		<!-- 普通商城商品规格 -->
		<u-popup :show="show" :round="10" mode="bottom" v-if="type == 1">
			<view class="pwd-popup pr text-black3">
				<u-icon name="close" size="24" @click="close" class="close-icon" />
				<view class="flex align-center p-t-20">
					<view>
						<image :src="skuData.mainImageUrl" class="img-168 radius-8" />
					</view>
					<view class="margin-left">
						<view class="font-13 text-bold text-cut2">{{skuData.productName}}</view>
						<view>
							<text class="font-20 text-theme text-bold">¥{{skuData.productPrice}}</text>
							<text class="font-13 text-gray margin-left-sm noUse">¥{{ skuData.priceScribing }}</text>
						</view>
					</view>
				</view>
				<view class="font-15 text-bold m-t-15 m-b-15">规格</view>
				<view class="flex justify-between flex-wrap maxHeight">
					<view class="sku-item" :class="{'sku-item-active': item.publishStatus == 1&&skuIndex == index}" v-for="(item, index) in detail.skuList" :key="index" @click="selectSku(item,index)" :style="{color: (item.inventory <= 0 ? '#cccccc':'#000000'),background: item.publishStatus == 2? '#e5e5e5':''}" >{{ item.specValue }}</view>
				</view>
				<view class="flex justify-between font-15 text-bold m-t-15 m-b-20">
					<view>数量:</view>
					<view>
						<u-number-box v-model="stepVal" min="1"></u-number-box>
					</view>
				</view>

				<view class="flex justify-between align-center">
					<view>
						<view>
							<text class="font-15 text-bold">总计：</text>
							<text class="text-theme font-20 text-bold">¥{{skuData.productPrice | totalNum(stepVal) }}</text>
						</view>
						<view class="font-13 text-gray p-l-45 noUse">¥{{ skuData.priceScribing | totalNum(stepVal)  }}</view>
					</view>
					<view class="bottomBtn" @tap="submit">立即购买</view>
				</view>
			</view>
		</u-popup>
		<!-- 积分商城商品规格 -->
		<u-popup :show="show" :round="10" mode="bottom" v-if="type == 2">
			<view class="pwd-popup pr text-black3">
				<u-icon name="close" size="24" @click="close" class="close-icon" />
				<view class="flex align-center p-t-20">
					<view>
						<image :src="skuData.mainImageUrl" class="img-168 radius-8" />
					</view>
					<view class="margin-left">
						<view class="font-13 text-bold text-cut2">{{skuData.productName}}</view>
						<view>
							<text class="font-20 text-theme text-bold">¥{{skuData.productPrice}}</text>
							<text class="font-13 text-gray margin-left-sm noUse">¥{{ skuData.priceScribing }}</text>
						</view>
					</view>
				</view>
				<view class="font-15 text-bold m-t-15 m-b-15">规格</view>
				<view class="flex justify-between flex-wrap">
					<view class="sku-item" :class="{'sku-item-active': skuIndex == index}" v-for="(item, index) in detail.skuList" :key="index" @click="selectSku(item,index)" :style="{color: (item.inventory <= 0 ? '#cccccc':'#000000'), background: item.publishStatus == 2? '#cccccc':''}" >{{ item.specValue }}</view>
				</view>
				<view class="flex justify-between font-15 text-bold m-t-15 m-b-20">
					<view>数量</view>
					<view>
						<u-number-box v-model="stepVal" min="1"></u-number-box>
					</view>
				</view>

				<view class="flex justify-between align-center">
					<view>
						<view>
							<text class="font-15 text-bold">总计：</text>
							<text class="text-theme font-20 text-bold">¥{{skuData.productPrice | totalNum(stepVal) }}</text>
						</view>
						<view class="font-13 text-gray p-l-45 noUse">¥{{ skuData.priceScribing | totalNum(stepVal)  }}</view>
					</view>
					<view class="bottomBtn" @tap="submit">立即兑换</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { orderCreate } from '@/common/api/order.js';
	export default {
		data() {
			return {
				stepVal: 1,
				skuIndex: 0,
				skuData: {},
			};
		},
		props: {
			detail: {
				type: Object,
				default: () => {}
			},
			show: {
				type: Boolean,
				default: false
			},
			// type 1 普通商品规格
			// type 2 积分商城商品规格
			type: {
				type: Number,
				default: 1
			}
		},
		watch: {
			show: {
				handler(val) {
					if(val) {
						console.log(this.detail.skuList[0],"========.skuList[0]")
						this.skuData = {...this.detail}
						this.skuData.productPrice = this.detail.skuList[0].platformPrice
						this.skuData.mainImageUrl = this.detail.skuList[0].pic
						this.skuData.id = this.detail.skuList[0].id
						this.skuData.priceScribing = this.detail.skuList[0].crossedPrice
						this.skuData.specValue = this.detail.skuList[0].specValue
						this.skuData.productName = this.detail.skuList[0].skuName
						this.skuData.productArea = this.detail.productArea
						this.skuData.contributionValue = this.detail.skuList[0].contributionValue

                        this.selectSku(this.detail.skuList[0],0)

					}
				},
				immediate: true,
				deep: true
			}
		},

		filters: {
			totalNum: function(num,val) {
				if(!num) return 0
				if(!val) return 0
				return (num * val).toFixed(2)
			}
		},
		methods: {
			// 创建订单
			orderCreate(){
				let parmas = {
					skuId : this.skuData.id,
					buyCount: this.stepVal,
					remark : "",
				}
				orderCreate(parmas).then(res => {
					if(res.code == 200) {
						uni.navigateTo({
							url: '/pages/order/pay/payOrder?orderno='+ res.data
						})
					}
				})
			},
			selectSku(item,index) {

                if(item.publishStatus == 2) {
                    uni.showToast({
                        title: '该规格已下架',
                        icon: 'none'
                    })
                    return
                }

				if(item.inventory <= 0) {
					uni.showToast({
						title: '库存不足',
						icon: 'none'
					})
					return
				}
				this.skuIndex = index
				this.skuData = item
				this.skuData.productPrice = item.platformPrice
				this.skuData.mainImageUrl = item.pic
				this.skuData.id = item.id
				this.skuData.priceScribing = item.crossedPrice
				this.skuData.specValue = item.specValue
				this.skuData.productName = item.skuName
				this.skuData.contributionValue = item.contributionValue
				this.skuData.productArea = this.detail.productArea
			},
			submit() {
				// type 1 普通商品规格
				// type 2 积分商城商品规格

                //publishStatus: 1 上架  2 下架
                if(this.skuData?.publishStatus == 2) {
                    uni.showToast({
                        title: '该商品规格已下架',
                        icon: 'none'
                    })
                    return
                }


				if(this.type == 1) {
					uni.setStorageSync('skuData', this.skuData)
					uni.navigateTo({
						url: '/pages/order/placeOrder?num='+this.stepVal
					})
				}else {
					uni.setStorageSync('skuData', this.skuData)
					uni.navigateTo({
						url: '/pages/points/placeOrder?num='+this.stepVal
					})
				}
			},
			close() {
				this.$emit('close')
			},
		}
	}
</script>

<style lang="scss" scoped>
.maxHeight{
	max-height: 400rpx;
	overflow-y: scroll;
}
.pwd-popup {
	border-radius: 40rpx;
	padding: 40rpx;

	.close-icon {
		position: absolute;
		top: 30rpx;
		right: 30rpx;
	}

	.bottomBtn {
		width: 328rpx;
		height: 88rpx;
		background: linear-gradient(42deg, #FF0804 0%, #FC7844 100%);
		box-shadow: 0rpx 2rpx 10rpx 1rpx rgba(250,49,33,0.24);
		border-radius: 16rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
		color: #ffffff;
	}
	.sku-item {
		min-width: calc(50% - 15rpx);
		min-height: 64rpx;
		border-radius: 8rpx;
		border: 1rpx solid #999999;
		font-size: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 30rpx;
		padding: 0 30rpx;
	}
	.sku-item-active {
		color: #FA3121;
		border: 1px solid #FA3121;
		background: #fff6f5;
	}
}
</style>
